<script setup lang="ts">
import { wareAllList } from '@/api/wuliu/wares';
import { RefreshRight } from '@element-plus/icons-vue';
import { newfclist } from '@/api/wuliu/wares';

enum TabName {
  car = 'car',
  order = 'order'
}

const activeNames = ref([TabName.car, TabName.order]);

/* Ware */
const wareLoading = ref(true);
const carLoading = ref(true);


const allWareData = ref([]);

const allFcCarData = ref([]);

async function getAllWareData() {
  try {
    wareLoading.value = true;
    const { data } = await wareAllList({});
    allWareData.value = data;
  } catch (error) {
    console.error('Error get ware all list', error);
  } finally {
    wareLoading.value = false;
  }
}

async function getNewfclist() {
  try {
    carLoading.value = true;
    const { data } = await newfclist({});
    allFcCarData.value = data;
  } catch (error) {
    console.error('Error get ware all list', error);
  } finally {
    carLoading.value = false;
  }
}
getAllWareData();
getNewfclist();

</script>

<template>
  <div class="app-container home">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="待发车数据" :name="TabName.car">
        <template #title>
        <div class="car-data">
          <div class="car-data-item">
            <span>待发车数据</span>
            <el-button
              type="text"
              :style="{ fontSize: '14px' }"
              :icon="RefreshRight"
              :loading="carLoading"
              :disabled="carLoading"
              circle
              @click.stop="getNewfclist"
            />
          </div>
        </div>
        </template>

        <div v-loading="carLoading" class="home-car-data">
          <div class="order-data-item" v-for="(item, index) in allFcCarData" :key="index">
            <div class="item-area">车牌：{{ item.carNumber }} 车型：{{ item.standards == 1 ?'大车':'小车' }}</div>

            <div class="item-ware-list">
<!--              <div class="ware-item" v-for="ware in item.warelist" :key="ware.id">-->
                <el-descriptions direction="vertical" :column="4" border>
                  <el-descriptions-item label="司机">{{ item.driverName }}</el-descriptions-item>
                  <el-descriptions-item label="车牌">{{ item.carNumber }}</el-descriptions-item>
                  <el-descriptions-item label="总件数">{{ item.wareSum }}件</el-descriptions-item>
                  <el-descriptions-item label="已装件数">{{ item.shipmentWareAllSum }}件</el-descriptions-item>
                  <el-descriptions-item label="总运费">￥{{ item.warePriceSum }}</el-descriptions-item>
                  <el-descriptions-item label="装卸人">{{ item.zxrNames }}</el-descriptions-item>
<!--                  <el-descriptions-item label="发车时间">{{ item.wareCreateTime }}</el-descriptions-item>-->

                </el-descriptions>

                <!-- <div class="ware-postName">报单公司：{{ ware.postName }}</div>
                <div class="ware-bdrmc">报单人：{{ ware.bdrmc }}</div>
                <div class="ware-articleSum">总件数：{{ ware.articleSum }}</div>
                <div class="ware-shipmentWareSum">已装车：{{ ware.shipmentWareSum }}</div>
                <div class="ware-priceSum">总运费：{{ ware.priceSum }}</div>
                <div class="ware-priceSum">已付运费：{{ ware.paidAmount }}</div>
                <div class="ware-priceSum">报单时间：{{ ware.createTime }}</div> -->
<!--              </div>-->
            </div>
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item title="订单数据" :name="TabName.order">
        <template #title>
          <div class="collapse-head">
            <span>订单数据</span>
            <el-button
              type="text"
              :style="{ fontSize: '18px' }"
              :icon="RefreshRight"
              :loading="wareLoading"
              :disabled="wareLoading"
              circle
              @click.stop="getAllWareData"
            />
          </div>
        </template>

        <div v-loading="wareLoading" class="home-order-data">
          <div class="order-data-item" v-for="(item, index) in allWareData" :key="index">
            <div class="item-area">所属区域：{{ item.deptName }}</div>
            <div class="item-ware-list">
              <div class="ware-item" v-for="ware in item.warelist" :key="ware.id">
                <el-descriptions direction="vertical" :column="4" border>
                  <el-descriptions-item label="报单公司">{{ ware.postName }}</el-descriptions-item>
                  <el-descriptions-item label="报单人">{{ ware.bdrmc }}</el-descriptions-item>
                  <el-descriptions-item label="总件数">{{ ware.articleSum }}件</el-descriptions-item>
                  <el-descriptions-item label="已装车">{{ ware.shipmentWareSum }}件</el-descriptions-item>
                  <el-descriptions-item label="总运费">￥{{ ware.priceSum }}</el-descriptions-item>
                  <el-descriptions-item label="已付运费">￥{{ ware.paidAmount }}</el-descriptions-item>
                  <el-descriptions-item label="报单时间">{{ ware.createTime }}</el-descriptions-item>
                </el-descriptions>

                <!-- <div class="ware-postName">报单公司：{{ ware.postName }}</div>
                <div class="ware-bdrmc">报单人：{{ ware.bdrmc }}</div>
                <div class="ware-articleSum">总件数：{{ ware.articleSum }}</div>
                <div class="ware-shipmentWareSum">已装车：{{ ware.shipmentWareSum }}</div>
                <div class="ware-priceSum">总运费：{{ ware.priceSum }}</div>
                <div class="ware-priceSum">已付运费：{{ ware.paidAmount }}</div>
                <div class="ware-priceSum">报单时间：{{ ware.createTime }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style lang="scss">
$primary: #409eff;

.home {
  .el-collapse {
    .el-collapse-item {
      .el-collapse-item__header {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.home-order-data {
  --gap: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 14px 0;

  .order-data-item {
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: calc(100% / 2 - var(--gap));
    height: 640px;
    padding: 8px 14px;
    background-color: #f2f4f8;

    .item-area {
      flex: 0 0 auto;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(#aaa, 0.2);
      font-size: 15px;
      font-weight: bold;
    }

    .item-ware-list {
      flex: 1 0 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 8px;

      .ware-item {
        border-radius: 6px;
        padding: 8px 14px;
        background-color: #fff;
      }
    }
  }
}

.home-car-data {
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 14px 0;

  .order-data-item {
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: calc(100% / 2 - var(--gap));
    height: 340px;
    padding: 8px 14px;
    background-color: #f2f4f8;

    .item-area {
      flex: 0 0 auto;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(#aaa, 0.2);
      font-size: 15px;
      font-weight: bold;
    }

    .item-ware-list {
      flex: 1 0 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 8px;

      .ware-item {
        border-radius: 6px;
        padding: 8px 14px;
        background-color: #fff;
      }
    }
  }
}
</style>
